<template>
<div>
        
    <!--两列布局--> 
    <div class="wrapper qa-content"> 
      <div class="fl left-list"> 
         <div class="tab-content"> 
             <div id="index" class="tab-pane active"> 
         <div class="tab-bottom-line"> 
    
        <div class="qa-list" v-infinite-scroll="loadMore"> 
          <div class="tab-content"> 
          <div id="new" :class="'tab-pane '+(flag==='new'?'active':'')"> 
            
            <ul class="detail-list"> 
            <li class="qa-item" v-for="(item,index) in searchlist" :key="index"> 
              <div class="fl record"> 
              <spen class="number"> 
                <div class="border useful"> 
                <p class="usenum">{{item.thumbup==null?0:item.thumbup}}</p> 
                <p>赞</p> 
                </div> 
                <div class="border answer"> 
                <p class="ansnum">{{item.reply==null?0:item.thumbup}}</p> 
                <p>踩</p> 
                </div> 
              </spen> 
              </div> 
              <div class="fl info"> 
              <spen class="question"> 
                <!-- <p class="author"><span class="name">{{item.replyname}}</span><span>{{item.replytime}}</span>回答</p>  -->
                <!-- <p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p>  -->
                <router-link  target="_blank" :to="'/article/content/'+item.id"><font size="5px" face="verdana" style="color:black;size:20px"> {{item.title}}</font> </router-link>

              </spen> 
              <div class="other"> 
                <div class="fr brower"> 
                <p>浏览量 {{item.visits}} | {{item.createtimeStr}} 来自 <a href="#">Kaki Nakajima</a></p> 
                </div> 
              </div> 
              </div> 
              <div class="clearfix"></div> 
              </li> 
            </ul> 
        
          </div> 
          <div id="hot" :class="'tab-pane '+(flag==='hot'?'active':'')"> 
            
            
            

          </div> 
          <div id="wait" :class="'tab-pane '+(flag==='wait'?'active':'')"> 
            
         


          </div> 
          </div> 
        </div> 
        </div> 
      </div> 
      <div id="php" class="tab-pane">
        php 
      </div> 
      <div id="js" class="tab-pane">
        Javascript 
      </div> 
      <div id="python" class="tab-pane">
        python 
      </div> 
      <div id="java" class="tab-pane">
        java 
      </div> 
      </div> 
    </div>

      <div class="fl right-tag"> 
      <div class="block-btn"> 
      <p>今天，有什么好东西要和大家分享么?</p> 
      <a class="sui-btn btn-block btn-share" href="./qa-submit.html" target="_blank">发布问题</a> 
      </div> 
      <div class="hot-tags"> 
      <div class="head"> 
        <h3 class="title">热门标签</h3> 
      </div> 
      <div class="tags"> 
        <ul class="sui-tag"> 
        <li>Php</li> 
        <li>Javascript</li> 
        <li>Gif</li> 
        <li>Java</li> 
        <li>C#</li> 
        <li>iOS</li> 
        <li>C++</li> 
        </ul> 
      </div> 
      </div> 
    </div> 
    <div class="clearfix"></div> 
    </div> 
  
  </div>

   
</template>

<script>
import '@/assets/css/page-sj-qa-logined.css'
import articleApi from '@/api/article'
import axios from 'axios'
export default {
    data(){
       return{
         flag:'new',
         pageNo:1,
         pageSize:10,
         searchEntity:{

         }
       }
    },
    asyncData({params}){
       return articleApi.searchlist(1,12,{}).then(res=>{
            return {
                searchlist:res.data.data.rows
            }
        })
    },
    methods: {
        loadMore(){
            console.log("xxxx")
            articleApi.searchlist(++this.pageNo,this.pageSize,this.searchEntity).then(res=>{
              this.searchlist = this.searchlist.concat(res.data.data.rows)
        })
      }
  }
}
</script>